<template>
    <div class="js-box">
        <van-nav-bar
        title="订单结算"
        left-arrow
        @click-left="onClickLeft"
        />
        <div class='one-box'>
            <span>OMINI.BASS</span>
            <span style="color:gray;">18802155485</span><br/>
            <div>
                <div class='one-box1'>
                    <div>
                        <div style="width:50px; height:50px; background-color: #c7aa95; border-radius: 50%; line-height: 50px; text-align: center; margin: 28px 20px;">
                            <van-icon name="location-o" />
                        </div>
                    </div>
                    <div>
                        <van-cell @click="showPopup" style="width: 100%;">
                            <span style="font-size:12px;">福建省厦门市翔安区某个镇某个村厦门市翔安区某个镇某个村69号</span><van-icon name="arrow-down" /><br/>
                            <h4 style="color: red; font-size: 10px;">福建省厦门市翔安区某个镇某个村厦门市翔安区某个镇某个村69号</h4>
                        </van-cell>
                        <van-popup
                        v-model:show="show"
                        round
                        position="bottom"
                        :style="{ height: '60%' }"
                        >
                        <p>选择收获地址</p>
                        <div style="width: 90%; margin-left: 20px; margin-top: 20px; height: 100px; background-color:#c7aa95; color: white;">
                            <div style="width:70%; height: 100px;">
                                <p>OMINIBASS 1534524564562</p>
                                <p>里放入凉开水给了对方</p>
                            </div>
                            <div style="border-left:3px dotted white; width: 30%; height: 100px; line-height: 100px; text-align: center;">
                                默认
                            </div>
                            <van-button type="warning" round size="large" style="margin-top:220px;">确定</van-button>
                        </div>
                        </van-popup>
                    </div>
                    <div>
                        <span>福建省厦门市翔个镇某个<van-checkbox v-model="checked" style="display: inline-block;"></van-checkbox></span>
                    </div>
                </div>
            </div>
        </div>
        <div class="two-box">
            <div>OMINI定制</div>
            <div class="two-box1">
                <div>
                    <img src='https://www.pmdaniu.com/storages/124210/868aee87bcfe25b7b4bd93393e7a65a6-114945/images/%E8%B4%AD%E7%89%A9%E8%BD%A6/imgs_u3051-0.svg'/>
                </div>
                <div>
                    <h5>福建省厦门市翔安区某个镇某个村厦门市翔安区某个镇某个村69号</h5>
                    <P style="color:black;">淡金色 【10cm】</P>
                </div>
            </div>
            <van-cell is-link @click="showPopup1">优惠卷 满500减20</van-cell>
            <h4>配送方式 普通配送 快递 免邮</h4>
            <h4>运费险 确认收货前退货可赔付9元 ￥1.2元</h4>
            <h4>订单备注 选填，请先和商家协商一致</h4>
            <h4>共1件: ￥519.99</h4>
        </div>
        <div class="three-box">
            <span style="color:gray;" class="hhh">共1件</span>
            <span style="color:black;">合计：</span>
            <span style="color:red;">￥39.99</span>
            <!-- <van-button round  type="warning" style="width:100px; height:30px;">提交订单</van-button> -->

            <van-cell @click="showPopup1" style="width:60px; height:30px; background-color:#ff9162; border-radius: 10px 10px 10px 10px; display: inline-block; margin-left: 30px; vertical-align: middle;">提交订单</van-cell>
            <van-popup v-model:show="show1" position="bottom" :style="{ height: '60%' }" >
                <p>
                    确认付款
                </p>
                <h1>
                    ￥139.90
                </h1>
                <p>支付宝账号 134******80</p>
                <p>付款方式 花呗</p>
                <p>请验证指纹或者输入密码<button @click="zt1">成功</button><button @click="zt2">失败</button></p>
            </van-popup>
        </div>
    </div>
</template>
<script setup lang="ts">
    import { ref } from 'vue';
    import { useRouter } from "vue-router";
    const checked = ref(true);
    const onClickLeft = () => history.back();
    const show = ref(false);
    const show1 = ref(false);
    const showPopup = () => {
      show.value = true;
    };
    const showPopup1 = () => {
      show1.value = true;
    };
    //成功或失败
    let router=useRouter();
    let zt1=()=>{
        router.push('/successful')
    }
    let zt2=()=>{
        router.push('/failure')
    }
</script>
<style scoped>
    *{margin: 0px; padding: 0px;}
    .js-box{
        width: 100%;
        height: 725px;
        background-color: #d9dce0;
        margin: 20 auto;
    }
    .one-box{
        width: 90%;
        margin: 20px auto;
        height: 180px;
        background-color: white;
    }
    .one-box1{
       height: 110px;
    }
    .one-box1 div{
        float: left;
        width: 100%;
    }
    .one-box1 div:nth-child(1){
        width: 30%;
    }
    .one-box1 div:nth-child(2){
        width: 70%;
    }
    .two-box{
        width: 90%;
        margin: 10px auto;
        background: white;
    }
    .two-box1{
        display: flex;
        margin-top: 10px;
    }
    .three-box{
        width: 100%;
        height: 50px;
        background-color: white;
        border: 1px solid gray;
        position: fixed;
        bottom: 80px;
        line-height: 50px;
    }
    .hhh{
        margin-left: 80px;
        vertical-align: middle;
    }
</style>